<template>
  <div>
    <el-card style="text-align: left" class="box-card">
      <div id="recommend">
        <div style="font-size: 30px">搜索结果</div>
        <table>
          <tr>
            <td style="vertical-align: top">
              <div id="commodity">
                <el-card
                  v-for="(item, index) in searchResult"
                  :key="index"
                  class="commodity-card2"
                  style="margin-left: 10px"
                >
                  <div>
                    <el-image
                      @click="
                        getIndexAndComName(item.id, item.commodityName);
                        goDetails();
                      "
                      id="commodity-image"
                      style="width: 150px; height: 150px"
                      :src="`${item.imgpaht}`"
                      fit="cover"
                    ></el-image>
                    <div class="colour-bar2">就爱商城</div>
                    <div class="commodity-info2">
                      <div style="height: 45px">
                        <span
                          @click="
                            getIndexAndComName(item.id, item.commodityName);
                            goDetails();
                          "
                          id="commodity-name"
                          >{{ item.commodityName }}</span
                        >
                      </div>
                      <div>
                        <span
                          @click="
                            getIndexAndComName(item.id, item.commodityName);
                            goDetails();
                          "
                          id="commodity-current-price"
                          >￥{{ item.commodityCurrentPrice }}</span
                        >
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // url : "http://localhost:5000/132738091215263822.jpg",
      url: "",
      tableData: [],
      index: 0,
      name: "",

      searchResult: [],
    };
  },
  props: {
    getQueryData: [],
  },
  watch: {
    getQueryData: function () {
      console.log(this.getQueryData);
      this.searchResult = this.getQueryData;
    },
  },
  methods: {
    getIndexAndComName(id, name) {
      this.index = id;
      this.name = name;

      console.log(this.index);
      console.log(this.name);
    },

    goDetails() {
      this.$router.push({
        path: "/commoditydetails",
        query: {
          id: this.index,
          name: this.name,
        },
      });
    },
  },
  mounted() {
    this.searchResult = this.getQueryData;
    console.log(this.searchResult);
  },
};
</script>

<style scoped>
/* 推荐卡片的样式 */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  min-height: 500px;
  height: 100%;
}

/* 商品卡片中的彩条样式 */
.colour-bar {
  text-align: left;
  background-color: red;
  color: white;
  padding: 5px;
}
.colour-bar2 {
  font-size: 10px;
  text-align: left;
  background-color: red;
  color: white;
  padding: 5px;
}

/* 商品卡片中的商品信息样式 */
.commodity-info {
  margin-top: 45px;
  font-size: 25px;
}
.commodity-info2 {
  margin-top: 5px;
  font-size: 15px;
}

#commodity-name:hover,
#commodity-current-price:hover {
  color: orange;
  border-bottom: 3px solid sandybrown;
  cursor: pointer;
}

#recommend {
  padding: 0 150px;
}

#commodity {
  display: flex;
  flex-wrap: wrap;
}

.el-image {
  cursor: pointer;
}

/* 商品卡片的样式 */
.commodity-card {
  width: 350px;
  height: 580px;
  margin-top: 20px;
  text-align: center;
}
.commodity-card2 {
  width: 200px;
  height: 280px;
  margin-top: 20px;
  text-align: center;
}

/* 伪元素（用于清除浮动） */
/* .recommend::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.recommend{
    *zoom: 1;  
} */
</style>